<template>
  <div class="bubble_box">
    <div id="circleWrap" ref="circleWrap" class="circle_wrap" data-top="0" :style="{top: `${top}px`}">
      <div id="circleList" ref="circleList" class="circle_list" >
        <!-- <div class="circle" style="width: 60px; height: 60px; line-height: 60px;background-color: red">hhah</div> -->
        <div
          v-for="(circle, index) in chartData"
          :key="`circle_${index}`"
          class="circle"
          :style="circle.style"
        >
        <div class="text_warp_name"><p>{{ circle.name }}</p></div>
        <div class="text_warp_value"><p>{{ circle.value }}</p></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
import TWEEN from '@tweenjs/tween.js'
var colors = [
  "#6cc569",
  "#8a8939",
  "#6860ce",
  "#4a9aec",
  "#2773e5",
  "#004b72",
  "#ff8a23",
  "#2248d7",
  "#015c60",
  "#ae53bc",
  "#12ddef",
  "#0075a9",
  "#cc1a83",
  "#0e7e55",
  "#002dc3",
  "#f7ae68",
  "#08b8f2",
  "#c744b3",
  "#68d4f7",
  "#b6503c",
  "#f97960",
  "#4f8516",
  "#efe390",
  "#cc8241",
];

export default {
  name: "BubbleChart",
  // props: ["item"],
  data() {
    return {
      // colors,
      top: 0,
      targetHeight: 300
    };
  },
  created() {
    const mockData = Array.from({length: 30}, (v, i) => ({ name: i+1, value: Math.floor(Math.random() * 60) + 20 }));
    const speed = 1;
    this.item = {
      with: 600,
      height: 300,
      chartData: {
        rows: mockData,
      },
      speed,
    }
  },
  computed: {
    chartData() {
      // let originData = this.item.chartData.rows
      let originData = this.item.chartData.rows.map(d => {
        let value = d.value;
        if (typeof value !== 'number') {
          d.value = 0;
        }
        return d;
      });

      const extent = d3.extent(originData, d => d.value)
      const scaleLinear = d3.scaleLinear().domain(extent).range([120, 160])
      const isAllZero = extent.toString() == '0,0'

      return originData.map((row, index) => {
        const { name, value } = row;

        // var width = Math.round(Math.random() * 50) + 60;
        const width = isAllZero ? 60 : scaleLinear(value)
        const marginTop = Math.round(Math.random() * (220 - width));
        const marginLeft = Math.round(Math.random() * 40) + 20;
        const floatDir = Math.round(Math.random() * 20) % 2 == 0 ? "left" : "right";
        const style = {
          width: `${width}px`,
          height: `${width}px`,
          "background-color": colors[index % colors.length],
          "margin-left": `${marginLeft}px`,
          "margin-top": `${marginTop}px`,
          float: floatDir,
        };
        return {
          name,
          value,
          style,
        };
      });
    },
    len() {
      return this.chartData.length;
    },
    speed() { return this.item.speed; },
    // targetHeight () { return 300 }
  },
  watch: {
    item () {
      console.log('watch')
      // this.scroll()
    }
  },
  mounted() {
    const eleHieght = document.getElementById('circleList').offsetHeight
    this.targetHeight = eleHieght < 300 ? 300 : eleHieght
    this.top = 300
    this.scroll()
    this.animate()
  },
  methods: {
    animate () {
        requestAnimationFrame(this.animate)
        TWEEN.update()
    },
    scroll () {
      // this.targetHeight = window.getComputedStyle(this.$refs.circleList).height.slice(0, -2)
      let initPos = {top: 600}
      // const circleWrap = document.getElementById('circleWrap')
      // console.log(this.$refs.circleList, circleWrap)
      this.tween = new TWEEN.Tween(initPos)
      // this.tween = new TWEEN.Tween(document.getElementById('target3'))
      .to({top: -this.targetHeight}, 10 * this.targetHeight * this.speed)
      .easing(TWEEN.Easing.Linear.None)
      .repeat(Infinity)
      // .delay(1000)
      .onUpdate((obj) => {
        console.log(obj.top, this.targetHeight)
        this.top = obj.top
        // this.$refs.circleWrap.style.top = `-${initPos.x}px`
        // if (obj.top == -this.targetHeight) {
        //   this.scroll()
        // }
      }).start()
    }
  }
};
</script>

<style lang="scss" scoped>
.bubble_box {
  // width: 100%;
  // height: 100%;
  width: 660px;
  height: 300px;
  border: 1px solid red;
  color: #fff;
  overflow: hidden;
  .circle_wrap {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    list-style: none;
    // animation: animation 10s linear infinite;
    // @keyframes animation {
    //   from {
    //     top: 0;
    //   }
    //   to {
    //     top: -100vh;
    //   }
    // }
  }
  .circle {
    display: block !important;
    border-radius: 50%;
    text-align: center;
    overflow-wrap: break-word;
    float: left;
    // width: 60px;
    // height: 60px;
    // line-height: 60px;
    // background-color: red
  }

  .circle_list:after {
        display: block;
        clear: both;
        content: "";
      }

  .text_warp_name, .text_warp_value {
    display: block;
    width: 100%;
    height: 50%;
    font-size: 2em;
    p {
      vertical-align:  8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 8px;
    }
  }

  .text_warp_name p{
    // padding-top: 30px;
    padding-top: calc(100% - 100px);
  }
}
</style>